<html>
  <title>OyeJango!</title>
  <head>

<!--
    Code for redirection!
    <meta http-equiv="refresh" content="5;url=http://www.google.com">
    -->

<!--    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.js" type="text/css" /> -->

    <link rel="stylesheet" href="/static/css/ui-lightness/jquery-ui-1.8.16.custom.css" \
	  type="text/css" />
    
    <script type="text/javascript" src="/_ah/channel/jsapi"></script>
<!--    <script type="text/javascript" src="/static/jquery.js"></script> -->
    <script type="text/javascript" src="/static/js/jquery-1.6.2.min.js"></script>
    <script type="text/javascript" src="/static/js/jquery-ui-1.8.16.custom.min.js"></script>
    
    <script type="text/javascript" src="/static/engine.js"></script> 
    <script type="text/javascript" src="/static/channel_engine.js"></script>

    <style>
      a:link {text-decoration:none;}
      body {font-size:80%;}
    </style>

  </head>

  <body>
    <a href="logout-area">logout {{userame}}</a>
    Welcome {{username}} to OyeJango!

    <div id="song-search-area" class="ui-widget">
      <label for="song-search">Search song: </label>
      <input id="song-search" class="ui-widget"/>
    </div>

    <div id="tabs">
      <ul>
	<li><a href="#hindi-songs">Hindi</a></li>
	<li><a href="#english-songs">English</a></li>
      </ul>
      <div id="hindi-songs">
	<ul>
	  {% for song in hindi_songs %}
	    <li>{{song.songname}}</li>
	  {% endfor %}
	</ul>
	</div>
      <div id="english-songs">
	<ul>
	  {% for song in english_songs %}
	    <li>{{song.songname}}</li>
	  {% endfor %}
	</ul>
      </div>
    </div>

    <div id="playlist-area"></div>

    <div id="chat-area"></div>

    Channel token is {{channel_token}}

    <script type="text/javascript">
channel=new goog.appengine.Channel('{{channel_token}}');
socket=channel.open();
socket.onopen=onopened;
socket.onerror=onerror;
socket.onmessage=onmessage;
    </script>
    
  </body>

</html>
